<template>
    <div class="app-container">
        <el-table
        v-loading=false
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row>
            <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                    {{  scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="域名">
                <template slot-scope="scope">
                    <p>
                        <a target="_blank" :href="'http://' + scope.row.Host">{{ scope.row.Host }}</a>
                    </p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="名称">
                <template slot-scope="scope">
                    <p>{{ scope.row.Name }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="命名空间">
                <template slot-scope="scope">
                    <p>{{ scope.row.NameSpace }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <p>{{ scope.row.CreateTime }}</p>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getList } from '@/api/ingress-nginx'
export default {
    data() {
        return {
            list: null
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getList("default").then(response => {
                this.list = response.data
            })
        }
    }
}
</script>
<style>
    .red {
        color: #d20000
    }
    .green {
        color: green
    }
</style>